import type { PaginationProps } from "@pureadmin/table";
import { deviceDetection } from "@pureadmin/utils";
import { getPage, exportExcel } from "@/api/base";
import { ref, toRaw, reactive, onMounted } from "vue";
import { usePublicHooks } from "../../hooks";
import dayjs from "dayjs";
import { downloadByData } from "@pureadmin/utils";

export function useLog() {
  const dataList = ref([]);
  const loading = ref(true);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const form = reactive({
    requestDate: [
      dayjs(new Date()).format("YYYY-MM-DD"),
      dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
    ],
    startTime: "",
    endTime: "",
    requestUrl: "",
    requestContent: "",
    IsSuccess: "",
    pageIndex: pagination.currentPage,
    pageSize: pagination.pageSize
  });
  const { tagStyle } = usePublicHooks();

  const columns: TableColumnList = [
    {
      label: "序号",
      width: 60,
      type: "index"
    },
    {
      label: "时间",
      width: 200,
      prop: "CreateTime"
    },
    {
      label: "请求IP",
      width: 120,
      prop: "IP"
    },
    {
      label: "请求地址",
      width: 200,
      prop: "RequestUrl"
    },
    {
      label: "请求内容",
      prop: "RequestContent",
      width: 300,
      showOverflowTooltip: true
    },
    {
      label: "响应内容",
      prop: "ResponseContent",
      showOverflowTooltip: true
    },
    {
      label: "响应时间",
      width: 100,
      prop: "Timer"
    },
    {
      label: "是否成功",
      width: 100,
      prop: "IsSuccess",
      cellRenderer: ({ row, props }) => (
        <el-tag size={props.size} style={tagStyle.value(row.IsSuccess ? 1 : 0)}>
          {row.IsSuccess ? "成功" : "失败"}
        </el-tag>
      )
    }
  ];

  async function onSearch() {
    loading.value = true;
    form.startTime = form.requestDate[0];
    form.endTime = form.requestDate[1];
    const { Data } = await getPage("logRecord", toRaw(form));
    dataList.value = Data.data;
    pagination.total = Data.total;
    pagination.pageSize = Data.pageSize;
    pagination.currentPage = Data.pageIndex;

    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };
  function handleCurrentChange(val: number) {
    form.pageIndex = val;
    onSearch();
  }

  function handleSizeChange(val: number) {
    form.pageSize = val;
    onSearch();
  }

  // 导出日志
  const exportLog = async () => {
    loading.value = true;
    form.startTime = form.requestDate[0];
    form.endTime = form.requestDate[1];
    var res = await exportExcel("logRecord", toRaw(form));
    loading.value = false;
    downloadByData(res, "接口日志.xlsx");
  };

  onMounted(async () => {
    onSearch();
  });
  return {
    form,
    loading,
    columns,
    dataList,
    pagination,
    deviceDetection,
    onSearch,
    resetForm,
    handleCurrentChange,
    handleSizeChange,
    exportLog
  };
}
